import { chartAutoLoop } from './../config/index'
import { chartTimer } from '@/config'
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class ChartTimerMixins extends Vue {
  chartActiveIndex = 0
  maxChartLoopNumber = 4
  timerFn: any = null

  startChartTimerFn() {
    this.timerFn = setInterval(() => {
      if (this.chartActiveIndex < this.maxChartLoopNumber - 1) {
        this.chartActiveIndex += 1
      } else {
        this.chartActiveIndex = 0
      }
    }, chartTimer)
  }
  restartChartTimerFn() {
    this.startChartTimerFn()
  }

  clearChartTimerFn() {
    clearInterval(this.timerFn)
    this.timerFn = null
  }

  beforeDestroy() {
    this.clearChartTimerFn()
  }

  handleMouseOver() {
    this.clearChartTimerFn()
  }

  handleMouseOut() {
    this.restartChartTimerFn()
  }

  mounted() {
    if (chartAutoLoop) {
      this.startChartTimerFn()
    }
  }
}
